<template>
<div>
  <van-nav-bar
    title="抢购"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="qianggoou1">
    <van-cell-group v-for="item in tableData">
  <van-card>
    <template #tags>
    <span>
      <img :src="item.img" width="30px" height="30px">
    </span>
      <span class="mingzi">{{item.name}}</span>
      <span class="pinlun">{{item.pinlun}}</span><br><br>
      <span class="guanggao">{{item.guanggao}}</span>
      <span class="ggw">{{item.ggw}}</span><br><br>
    </template>
  </van-card>
  </van-cell-group>
  </div>
  <div class="qianggoou2">
    <van-cell-group v-for="item in tableData">
      <van-card>
        <template #tags>
          <span class="jiage"><span >当前价格:</span> <span class="daxiao">{{item.jiage}}</span></span>
          <span class="zhekou"><span >折扣前:</span><span class="daxiao1"><s>{{item.zhekou}}</s></span></span>
          <span class="ti"><van-button class="tijiao" @click="tijiao()">提交订单</van-button></span>
        </template>
      </van-card>
    </van-cell-group>
  </div>
</div>
</template>
<script>
import {findUserById} from "@/api/wode/user";

export default {
  name: "QianggouView",
  data(){
    return{
      tableData:[],
      orderInfo: {},
      user:{}
    }
  },
  methods:{
    onClickLeft() {
      //返回上一页
      this.$router.go(-1)
    },
    findUserById() {
      findUserById(localStorage.getItem('token')).then(res => {
        if (res.code == 208){
          this.$message(res.message)
          localStorage.removeItem('token')
          this.$router.push('/')
        }
        this.user = res.data
      })
    },
    qianggouxinxi() {
      var id = this.$route.query.id
      this.axios.post(`http://1.94.221.254:9999/api-qcfw-mendian/mendian/qianggouxinxi?id=${id}`).then(res => {
        this.tableData = res.data
      })
    },
    tijiao(){
      this.orderInfo.orderName = this.tableData[0].name
      this.orderInfo.orderName = this.tableData[0].name
      this.orderInfo.photo = this.tableData[0].img
      this.orderInfo.userId = this.user.id
      this.orderInfo.discount = Number(this.tableData[0].zhekou)-Number(this.tableData[0].jiage)
      this.$router.push({path: '/Wxprice', query: this.orderInfo})
    },
  },
  created() {
    this.findUserById()
  },
  mounted() {
    this.qianggouxinxi();
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
  }

}
</script>



<style scoped>
.qianggoou2{
  height: 30px;
  margin-top: 99%;
}
.ti{
  padding-top: 60px;
  float: right;
}
.tijiao{
  border-radius: 30px;
  width: 130px;
  background-color: #FB4D03;
  color: white;
}
.daxiao{
  font-size: 22px;
  color: red;
}
.daxiao1{
  font-size: 15px;
  color: #c61b1b;
}
.jiage{
  padding-left: 10px;
  padding-top: 70px;
  float: left;

}
.zhekou{
margin-left: 10px;
  padding-top: 70px;
}
.ggw{
  margin-top: 2px;
  padding-left: 10px;
}
.qianggoou1{
  margin-top: 55px;
}
.mingzi{
  font-size: 20px;
  margin-top: -50px;
  padding-left: 60px;
}
.pinlun{
  font-size: 15px;
  padding-left: 10px;
}
.guanggao{
  padding-left: 10px;
}
</style>